<%@ page isELIgnored ="true" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="base.jsp" %>
<html>
<head>

	<script type="text/javascript">
	$(document).ready(function() {
// 		这里的程序会反复执行?
		$('#euiTree').tree({
			url:'json/tree_data1.json',
			onClick:function(node){
				alert(node.text);
				if($("#tt").tabs('exists',node.text)){
					$("#tt").tabs('select',node.text);
				}else{
					$("#tt").tabs('add',{
						title:node.text,
						href:node.text+".jsp",
						closable:true,
						selected:true
					});
				}
			},
			onContextMenu: function(e, node){
				e.preventDefault();
				// select the node
				$('#euiTree').tree('select', node.target);
				// display context menu
				$('#mm').menu('show', {
					left: e.pageX,
					top: e.pageY
				});
			}
		});
		$('#tt').tabs({  
		    border:false,  
		    onSelect:function(title){  
<%--		        alert(title+' is selected');  --%>
		    }  
		});
		$('#dg').datagrid({
			url:'/StudyEUI/json',
		  		columns:[[  
		           {field:'id',title:'ID',width:100},  
		           {field:'password',title:'password',width:100},  
		           {field:'userName',title:'userName',width:100,align:'right'}  
		        ]] 
		});
	});
		function add(){
			alert("hello new tab");
			$('#tt').tabs('add',{
				title: 'new tab',
				selected: true
			});
		}
		function open1(plugin){
			if($("#tt").tabs('exists',plugin)){
				$("#tt").tabs('select',plugin);
			}else{
				$("#tt").tabs('add',{
					title:plugin,
					href:"MyJsp1.jsp",
					closable:true,
					selected:true
				});
			}
		}
</script>
</head>
<body>
	<div id="mm" class="easyui-menu" style="width: 120px;">
		<div>New</div>
		<div>
			<span>Open</span>
			<div style="width: 150px;">
				<div><b>Word</b></div>
				<div>Excel</div>
				<div>PowerPoint</div>
			</div>
		</div>
		<div data-options="iconCls:'icon-save'">Save</div>
		<div class="menu-sep"></div>
		<div>Exit</div>
	</div>

	<div class="easyui-layout" style="align:'center',width:800px;height:650px;">
		<div data-options="region:'north'" style="height:100px"></div>
		<div data-options="region:'south',split:true" style="height:50px;"></div>
		<div data-options="region:'east',split:true" title="East" style="width:180px;">
			<ul class="easyui-tree" data-options="url:'json/tree_data1.json',animate:true,dnd:true"></ul>
		</div>
		<div data-options="region:'west',split:true" title="West" style="width:200px;">
			<div class="easyui-accordion" data-options="fit:true,border:false">
				<div title="Title1" data-options="selected:true" style="padding:10px;" onclick="open1('MyJsp.jsp')">
					<ul id="euiTree"></ul>
					<input type="button" value="test" onclick="open1('MyJsp.jsp')">
				</div>
				<div title="Title2" style="padding:10px;">
					content2
				</div>
				<div title="Title3" style="padding:10px">
					content3
				</div>
			</div>
		</div>
		<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
			<div class="easyui-tabs" data-options="fit:true,border:false,plain:true" id="tt">
			
				<div title="DataGrid2" style="padding:5px">
					<table id="dg">
<%--						data-options="singleSelect:true,collapsible:true,url:'../js/easyui/demo/layout/datagrid_data1.json'">--%>
					</table>
				</div> 
				
  				<div title="datebox" style="margin:10px 0;">
   					<input class="easyui-datebox"></input>
  				</div>

			</div>
		</div>
	</div>
</body>
</html>